<template>
    <div class="xx">
        <div class="x1">
             <span style="font-size:26px">{{$t('介绍（已升级 element-plus 正式版）')}}</span>
             <div>
                 <div class="im">
                      <div class="zxcv"><span>Hello超级管理员</span>
                     <div class="imgi"><img style="border-radius:50%;width:100px;height:100px;" 
                     src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png" alt="">
                     </div>
                      <br/>  <br/>  <br/>
                     <div>super-admin</div>
                     <span>超级管理员</span>
                     </div>
                 </div>
                 <div>
                     <p style="text-align:left;font-size:20px" >项目介绍</p>
                     <p style="text-align:left;font-size:16px">&nbsp;&nbsp;《vue3 改写 vue-element-admin，实现后台前端综合解决方案》项目演示</p>
                 </div>
                 <div>
                     <p style="text-align:left;font-size:20px" >项目功能</p>
                     <div v-for="(item,index) in data.user" :key="index">
                         <p style="text-align:left;font-size:16px">{{item.title}}</p>
                         <el-progress :percentage="item.percentage" status="success" />
                     </div>
                 </div>
             </div>

        </div>
         <div class="x2">
             <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="功能" name="first">
                  <div class="demo-collapse" v-for="(item,index) in data.user" :key="index">
                     <el-collapse v-model="activeNames" @change="handleChange">
                        <el-collapse-item :title="item.title" name="1">
                            <div>
                            {{item.content}}
                            </div>
                        </el-collapse-item>
                        </el-collapse>
                      </div>
                </el-tab-pane>
                <el-tab-pane label="章节" name="second">
                    <div v-for="(item,index) in data.zuser" :key="index">
                        <el-timeline style="text-align:left;">
                            <el-timeline-item :timestamp="item.timestamp" placement="top">
                            <el-card>
                                <h4>{{item.content}}</h4>
                            </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="作者" name="third">
                    <div class="xxc">
                        <div class="xs">
                            <img style="border-radius:50%;width:100px;height:100px;"  src="https://img4.sycdn.imooc.com/61110c2b0001152907400741-140-140.jpg" alt="">
                             <div class="s1">
                             <p style="font-size:26px">Sunday</p>
                             <span style="font-size:18px">一个前端开发程序猿</span>
                             </div>
                        </div>
                        <div class="ddd">
                            <span style="text-align:left;font-size:18px">
                            &nbsp;&nbsp;&nbsp;高级技术专家，曾就职于国内一线互联网公司，
                            统筹过的多个大型项目用户数已过千万级。
                            致力于研究大前端技术，
                            多次受邀参加国内前端技术分享会，如：2018 年 Google 中国技术分享会。</span>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div> 
    </div>
</template>

<script setup>
import { gruser, zjuser } from "../http/api.js";
import { ref, reactive, onMounted, watch } from "vue";
import { useStore } from "vuex";
const data = reactive({
  user: [],
  zuser: []
  
});

onMounted(() => {
  userList();
  zjList();
});
const store = useStore();
const activeName = ref("first");

const userList = async () => {
  let res = await gruser();
  console.log(res);
  data.user = res.data;
};

const zjList = async () => {
  let res = await zjuser();
  console.log(res);
  data.zuser = res.data;
};
// watch(
//   () => store.state.language,
//   () => {
//     profile();
//     chapter();
//   },
//   { deep: true }
// );
</script>

<style lang='scss' scoped >
.xx {
  width: 1000px;
  background: #eee;
  display: flex;
  .x1 {
    flex: 2;
    background: #ffffff;
    margin-left: 20px;
    .im {
      margin-top: 20px;
      height: 160px;
      position: relative;
    }
  }
  .x2 {
    margin-left: 20px;
    flex: 4;
    background: #ffffff;
  }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.xxc {
  .xs {
    width: 270px;
    height: 300px;
    display: flex;
    justify-content: space-between;
    .s1 {
      margin: -10px 0px;
    }
  }
}
.ddd {
  margin-top: -140px;
}
.zxcv {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 45px;
  left: 106px;
}
.imgi {
  width: 100px;
  height: 100px;
  margin-left: 110px;
  position: absolute;
  top: -41px;
  left: -110px;
}
.imgi:hover {
  transform-origin: right center;
  animation: ii 0.6s linear forwards;
}
@keyframes ii {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-90deg);
  }
}
</style>

